<template>
	<view class="human-map pt-2">
		<image class="map" src="@/static/images/home/human-bg.png" mode=""></image>
		<image class="map2" src="@/static/images/home/map2.png" mode=""></image>
		<view class="map-data flex-r s-b">
			<view class="left ml-1">
				<text>name1</text>
				<view class="flex-c mt-1">
					<view>46.5 <text class="iconfont icon-taiyang" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-diqiu" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-beijiaodian" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-nanjiaodian" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-yueliang" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-shuixing" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-jinxing" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-huoxing" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-muxing" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-tuxing" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-tianwangxing" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-haiwangxing" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-mingwangxing" /> 46.5</view>
				</view>
			</view>
			<view class="center"></view>
			<view class="right mr-1 p-1">
				<text>name2</text>
				<view class="flex-c mt-1">
					<view>46.5 <text class="iconfont icon-taiyang" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-diqiu" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-beijiaodian" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-nanjiaodian" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-yueliang" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-shuixing" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-jinxing" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-huoxing" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-muxing" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-tuxing" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-tianwangxing" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-haiwangxing" /> 46.5</view>
					<view>46.5 <text class="iconfont icon-mingwangxing" /> 46.5</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>

</script>

<style lang="scss" scoped>
	.human-map {
		width: 100%;
		text-align: center;
		position: relative;
		padding-bottom: 40rpx;
		background: transparent;

		.map {
			width: 648rpx;
			height: 826rpx;
		}

		.map2 {
			width: 472rpx;
			height: 822rpx;
			position: absolute;
			top: 20rpx;
			left: 140rpx;
		}

		.map-data {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;

			.left,
			.right {
				background: #FFFFFF;
				border-radius: 8rpx;
				padding: 10rpx;

				>text {
					font-size: 24rpx;
					color: #FFFFFF;
					background: #1E76AA;
					padding: 8rpx 20rpx;
					border-radius: 4rpx;
				}

				view>view {
					font-size: 20rpx;
					color: #0B789A;
					padding: 6rpx 0;

					.iconfont {
						font-size: 20rpx;
						color: #0B789A;
						margin-left: 6rpx;
						margin-right: 8rpx;
					}
				}
			}

			.right {
				>text {
					background: #C36B00;
				}

				view>view {
					color: #C36B00;

					.iconfont {
						color: #C36B00;
					}
				}
			}

			.center {
				flex: 1;
			}
		}
	}
</style>